<template>
    <div>
    <el-card class="box-card" shadow="never">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="最新帖子" name="first">
     <div v-for="post in list" :key="post.id"> 
      <div class="has-text-left block">
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <router-link :to="{ name:'postDetail',params:{id: post.id} }">
          <span  class="mytitle">{{ post.title }}</span>
        </router-link>
        <router-link :to="{ name:'user-info',params:{ id: post.userId } }">
          <span class="mycontent" >ardai</span>
        </router-link>
        <span class="mycontent" >发布于:{{ post.createTime }}</span>
        <span class="mycontent" >浏览次数:{{ post.view }}</span>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
      </div>
      <hr>
    </div>
    </el-tab-pane>
    <el-tab-pane label="最热帖子" name="second">
     <div v-for="post in list" :key="post.id"> 
      <div class="has-text-left block">
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <a href="###"><span  class="mytitle">{{ post.title }}</span></a> 
        <span class="mycontent" >ardai</span>
        <span class="mycontent" >发布于:{{ post.createTime }}</span>
        <span class="mycontent" >浏览次数:{{ post.view }}</span>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
      </div>
      <hr>
    </div>
    </el-tab-pane>
    <el-tab-pane label="吵架吐槽" name="third">
     <div v-for="post in list" :key="post.id"> 
      <div class="has-text-left block">
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <a href="###"><span  class="mytitle">{{ post.title }}</span></a> 
        <span class="mycontent" >ardai</span>
        <span class="mycontent" >发布于:{{ post.createTime }}</span>
        <span class="mycontent" >浏览次数:{{ post.view }}</span>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
        <a href="###"><el-tag type="success"> 标签二</el-tag></a>
      </div>
      <hr>
    </div>
    </el-tab-pane>
  </el-tabs>
    </el-card>
 <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPagepage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template> 
<script>
import { getPostByPage } from "../../api/post"
export default {
  data() {
    return {
      //默认选择第第一个标签
      activeName: "first",
      list:[],
      currentPagepage: 1,
      pageSize: 5,
      total: 0,
      sectionId: 0,
    }
  },
  //初始化数据
  created(){
    this.fetchPost();
  },
  methods:{
    //获取文章数据
    fetchPost(){
        getPostByPage(this.currentPagepage,this.pageSize,this.sectionId).then(res=>{
          const result = res.data;
          if(result.code == 0){
            this.list = result.data.postList;
            this.total = result.data.counts;
            this.currentPagepage = result.data.page;
            this.pageSize = result.data.rows;
          }else{
            this.$message({
              message: result.msg,
              type: "error"
            })
          }
        })
    },
    //当前页发生变化时发生的函数
    handleCurrentChange(val){
        this.currentPagepage = val;
        this.fetchPost();
    },
    //切换专栏时候发生的函数
    handleClick(tab){
         console.log(tab.name);
         switch (tab.name) {
           case "first":
             this.sectionId = 0;
             this.fetchPost();
             break;
           case "second":
             this.sectionId = 1;
             this.fetchPost();
             break;
           case "third":
             this.sectionId = 2;
             this.fetchPost();
             break;
         }
    }
  }
}
</script>
<style scoped>
.has-text-left{
  position: relative;
}
.mytitle{
  position: absolute ;
  padding-left: 10px;
}
.mycontent{
  font-size: 10px;
    padding-left: 10px;
}
</style>
